<template>
  <a-form-model
    :ref="'complication' + confirmType"
    :model="complication"
    :label-col="formItemLayout.labelCol"
    :wrapper-col="formItemLayout.wrapperCol"
    labelAlign="left"
  >
    <a-form-model-item label="确诊情况">
      <a-radio-group v-model="complication.retinopathy">
        <a-radio :value="1"> 确诊有 </a-radio>
        <a-radio :value="2"> 确诊无 </a-radio>
        <a-radio :value="3"> 未确诊 </a-radio>
      </a-radio-group>
    </a-form-model-item>

    <div class="content" v-show="complication.retinopathy === 1">
      <a-divider />
      <a-form-model-item label="确诊日期">
        <a-date-picker
          :disabled-date="disabledDate"
          @change="onChange1"
          style="width: 200px"
          size="large"
          placeholder="请选择确诊日期！"
          v-model="complication.retinopathyDate"
        />
      </a-form-model-item>
      <a-form-model-item label="病变分期">
        <j-dict-select-tag
          v-model="complication.retinopathyStaging"
          dictCode="pubDossierRetinopathy"
          style="width: 220px"
          placeholder="请选择一项"
        />
      </a-form-model-item>

      <a-form-model-item label="黄斑水肿">
        <j-dict-select-tag
          v-model="complication.retinopathyMe"
          dictCode="pubDossierMe"
          style="width: 220px"
          placeholder="请选择一项"
        />
      </a-form-model-item>

      <a-form-model-item label="病变症状">
        <j-multi-select-tag
          v-model="complication.retinopathySymptom"
          dictCode="pubDossierRetinopathySymptom"
          type="checkbox"
        >
        </j-multi-select-tag>
      </a-form-model-item>

      <a-form-model-item label="检查日期">
        <a-date-picker
          :disabled-date="disabledDate"
          @change="onChange2"
          style="width: 200px"
          size="large"
          v-model="complication.retinopathyExamDate"
        />
      </a-form-model-item>

      <a-form-model-item label="视力（左）">
        <a-input-number style="width: 170px" v-model="complication.retinopathyVision" />
      </a-form-model-item>

      <a-form-model-item label="视力（右）">
        <a-input-number style="width: 170px" v-model="complication.retinopathyVisionRight" />
      </a-form-model-item>

      <a-form-model-item label="微动脉瘤">
        <a-select style="width: 170px" v-model="complication.retinopathyMicroaneurysm">
          <a-select-option :value="1"> 有 </a-select-option>
          <a-select-option :value="2"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="视网膜内出血">
        <a-select style="width: 170px" v-model="complication.retinopathyIntraRetinal">
          <a-select-option :value="1"> 有(任一象限中&lt;20处) </a-select-option>
          <a-select-option :value="2"> 有(任一象限中&gt;=20处) </a-select-option>
          <a-select-option :value="3"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="棉絮斑">
        <a-select style="width: 170px" v-model="complication.retinopathyFlock">
          <a-select-option :value="1"> 有 </a-select-option>
          <a-select-option :value="2"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="硬性渗出">
        <a-select style="width: 170px" v-model="complication.retinopathyExudate">
          <a-select-option value="1"> 有(非后极区) </a-select-option>
          <a-select-option value="2"> 有(后极区) </a-select-option>
          <a-select-option value="3"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="静脉串珠样改变">
        <a-select style="width: 170px" v-model="complication.retinopathyBeading">
          <a-select-option :value="1"> 有(&lt;=2个象限) </a-select-option>
          <a-select-option :value="2"> 有(&gt;2个象限) </a-select-option>
          <a-select-option :value="3"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="视网膜内微血管异常">
        <a-select style="width: 170px" v-model="complication.retinopathyMicrovascular">
          <a-select-option :value="1"> 有(&lt;=1个象限) </a-select-option>
          <a-select-option :value="2"> 有(&gt;1个象限) </a-select-option>
          <a-select-option :value="3"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="玻璃体积血">
        <a-select style="width: 170px" v-model="complication.retinopathyVitreous">
          <a-select-option :value="1"> 有 </a-select-option>
          <a-select-option :value="2"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="新生血管形成">
        <a-select style="width: 170px" v-model="complication.retinopathyNeovascularization">
          <a-select-option :value="1"> 有 </a-select-option>
          <a-select-option :value="2"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="视网膜前出血">
        <a-select style="width: 170px" v-model="complication.retinopathyAnteriorRetinal">
          <a-select-option :value="1"> 有 </a-select-option>
          <a-select-option :value="2"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="眼底出血">
        <a-select style="width: 170px" v-model="complication.retinopathyFundusHemorrhage">
          <a-select-option :value="1"> 有 </a-select-option>
          <a-select-option :value="2"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="后极部视网膜增厚">
        <a-select style="width: 170px" v-model="complication.retinopathyRetinalThickening">
          <a-select-option :value="1"> 有 </a-select-option>
          <a-select-option :value="2"> 无 </a-select-option>
        </a-select>
      </a-form-model-item>
    </div>
    <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
      <a-button type="primary" @click="save" :loading="saveLoading">保存</a-button>
      <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="confirm">
        <template slot="title">
          <p>此操作代表你已完成了页面的填写，是否继续？</p>
        </template>
        <a-button type="primary" style="margin-left: 30px" :loading="saveLoading">确认完成</a-button>
      </a-popconfirm>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import moment from 'moment'

export default {
  name: 'DiabeticRetinopathy',
  props: ['complication'],
  data() {
    return {
      confirmType: 2,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      saveLoading: false
    }
  },
  methods: {
    onChange1(date, dateString) {
      console.log(date, dateString)
      this.complication.retinopathyDate = dateString + ' 00:00:00'
      console.log(this.complication.retinopathyDate)
    },
    onChange2(date, dateString) {
      console.log(date, dateString)
      this.complication.retinopathyExamDate = dateString + ' 00:00:00'
      console.log(this.complication.retinopathyExamDate)
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current > moment().endOf('day')
    },
    save() {
      this.saveLoading = true
      this.$emit('save', this.confirmType)
    },
    confirm() {
      this.saveLoading = true
      this.$emit('confirm', this.confirmType)
    }
  }
}
</script>

<style lang="less" scoped></style>

